<template>
    <div class="resume">
        <div class="header">个人简历</div>
        <div class="main">
            <table width="100%" class="resume-tab">
                <tr class="module-title">
                    <td colspan="7">个人信息</td>
                </tr>
                <tr>
                    <td class="item">姓名</td>
                    <td>{{resume.name}}</td>
                    <td class="item">性别</td>
                    <td>{{resume.sex}}</td>
                    <td class="item">出生日期</td>
                    <td>{{resume.birth}}</td>
                    <td rowspan="6" style="width: 180px">
                        <div class="per-icon">
                            <a :href="resume.personalPhoto" target="_blank"><img :src="resume.personalPhoto" style="width: 100%"></a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="item">最高学历</td>
                    <td>{{resume.highestEducation}}</td>
                    <td class="item">最高学位</td>
                    <td>{{resume.academicDegree}}</td>
                    <td class="item">身份证号码</td>
                    <td>{{resume.idCard}}</td>
                </tr>
                <tr>
                    <td class="item">毕业院校</td>
                    <td colspan="3">{{resume.graduationInstitutions}}</td>
                    <td class="item">专业</td>
                    <td>{{resume.major}}</td>
                </tr>
                <tr>
                    <td class="item">户口所在地</td>
                    <td>{{resume.nativePlace}}</td>
                    <td class="item">籍贯</td>
                    <td>{{resume.domicilePlace}}</td>
                    <td class="item">毕业时间</td>
                    <td>{{resume.graduationDate}}</td>
                </tr>
                <tr style="height: 80px">
                    <td class="item">婚姻状况</td>
                    <td>{{resume.wedlock}}</td>
                    <td class="item">身高</td>
                    <td>{{resume.height}}</td>
                    <td class="item">健康状态</td>
                    <td>{{resume.health}}</td>
                </tr>
                <tr>
                    <td class="item">联系电话</td>
                    <td colspan="2">{{resume.contactPhone}}</td>
                    <td class="item">电子邮箱</td>
                    <td colspan="2">{{resume.email}}</td>
                </tr>
                <tr>
                    <td class="item">兴趣爱好</td>
                    <td colspan="6">{{resume.hobbies}}</td>
                </tr>
                <tr class="module-title">
                    <td colspan="7">教育经历</td>
                </tr>
                <tr>
                    <td class="item">阶段</td>
                    <td class="item" colspan="2">入学时间</td>
                    <td class="item" colspan="2">毕业时间</td>
                    <td class="item" colspan="1">学校</td>
                    <td class="item" colspan="1">专业</td>
                </tr>
                <tr v-for="(item) in resume.educationExperienceList">
                    <td>{{item.phase}}</td>
                    <td colspan="2"></td>
                    <td colspan="2">{{item.graduationDate}}</td>
                    <td>{{item.school}}</td>
                    <td>{{item.major}}</td>
                </tr>
                <tr class="module-title">
                    <td colspan="7">工作经历</td>
                </tr>
                <tr>
                    <td class="item" colspan="2">入职日期</td>
                    <td class="item" colspan="2">离职日期</td>
                    <td class="item" colspan="2">公司</td>
                    <td class="item" colspan="1">职位</td>
                </tr>
                <tr v-for="(item) in resume.workExperienceList">
                    <td colspan="2">{{item.hireDate}}</td>
                    <td colspan="2">{{item.departureDate}}</td>
                    <td colspan="2">{{item.company}}</td>
                    <td>{{item.position}}</td>
                </tr>
                <tr class="module-title">
                    <td colspan="7">外语水平</td>
                </tr>
                <tr>
                    <td class="item" >语种</td>
                    <td class="item" colspan="3">熟练程度</td>
                    <td class="item" colspan="3">等级证书</td>
                </tr>
                <tr style="height: 120px">
                    <td>英语</td>
                    <td colspan="3">翻译、写作、阅读、口语</td>
                    <td colspan="3">CET-6 TOELF560</td>
                </tr>
                <tr class="module-title">
                    <td colspan="7">计算机水平</td>
                </tr>
                <tr>
                    <td class="item" colspan="4">应用能力</td>
                    <td class="item" colspan="3">等级证书</td>
                </tr>
                <tr style="height: 120px">
                    <td colspan="4">{{resume.computerApplicationAbility}}</td>
                    <td colspan="3">{{resume.computerGradeCertificate}}</td>
                </tr>
                <tr style="height: 120px">
                    <td class="item">自我评价</td>
                    <td colspan="6">{{resume.selfEvaluation}}</td>
                </tr>
                <tr style="height: 60px">
                    <td class="item">备注</td>
                    <td colspan="6">{{resume.remark}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import {getResumeById} from "../../../network/resume";

export default {
    name: "PerResume",
    setup(){
    },
    // props:['id'],
    data(){
        return{
            resume:[]
        }
    },
    created() {
        let resumeId = this.$route.params.id;
        getResumeById(resumeId).then(data=>{
            console.log('data',data);
            this.resume = data.data;
        })
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
    margin: 0 auto;
    padding: 0;
}
.resume{
    color: #777777;
    width: 1200px;
}
.header{
    text-align: center;
    margin: 10px 0;
    letter-spacing: 20px;
    color: #777777;
    font-size: 24px;
    font-weight: bold;
}
.main{

}
.module-title{
    letter-spacing: 10px;
    font-weight: bold;
    font-size: 18px;
    background: rgb(209,213,209);
}
.item{
    font-weight: bold;
}
td{
    text-align: center;
    min-height: 27px;
    height: 42px;
    border: 1px solid gray;
}
.resume-tab{
    /*border-spacing: 0;*/
    border: 2px solid gray;
}
table{
    border-spacing: 0;
    border-collapse: inherit;
}
.per-icon{
    width: 160px;
    padding: 10px;
}
</style>
